<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a{
            width: 70px;
            text-align: center;
            letter-spacing: 2px;
            font-style: italic;
            background-color: #ddd;
            border: 1px solid #000;
        }
    </style>
</head>
<body>

    <input type="text" placeholder="请输入验证码" id="inp">
    <button id="btn">验证</button>
    <input type="text" name="" id="a" disabled>
    
    <button id="refresh">刷新</button>
    <script src="../js/tools.js"></script>
    <script>

        // 1 页面一打开的时候就会显示一个验证码

        // 2  点击刷新的时候，验证码可以变

        // 3 验证的时候，判断验证码是否输入正确
        //      正确就提示输入正确
        //      错误就提示错误 -- 清空输入框，刷新验证码


        // 拿对象
        var oInp = get('inp') ;
        var oBtn = get('btn') ;
        var oRefresh = get('refresh') ;
        var oCode = get('a') ;

        // 页面一打开的时候就会显示一个验证码
        oCode.value = code(5) ;

        // 点击刷新的时候，验证码可以变
        oRefresh.onclick = function() {
            oCode.value = code(5) ;
        }

        // 3 验证的时候，判断验证码是否输入正确
        oBtn.onclick = function() {
            // 拿到输入框的值
            if(oInp.value === oCode.value) {
                alert('验证通过') ;
            }
            // 错误就提示错误 -- 清空输入框，刷新验证码
            else {
                alert('输入错误') ;
                oInp.value = '' ;
                oCode.value = code(5) ;
            }
        }

     

    </script>
    
</body>
</html>